<{extend name="Public:public0" /}>

<{block name="title"}>安装 与 介绍<{/block}>

<{block name="sidebar"}><{include file="Public:sidebar-vuecli" /}><{/block}>

<{block name="head"}>
	<link rel="stylesheet" type="text/css" href="__ROOT__/css/vuex.css"/>
	<script type="text/javascript" src="__ROOT__/js/vue.js"></script>
<{/block}>

<{block name="content"}>
<div class="content guide with-sidebar components-guide">
<h1>安装 与 介绍</h1>	

<h2 id="installation">
	<a href="#installation" class="headerlink" title="installation" data-scroll="">安装</a>
</h2>	
<h3 id="直接下载-cdn"><a href="#直接下载-cdn" aria-hidden="true" class="header-anchor">#</a> 直接下载 / CDN</h3>
<p><a href="https://unpkg.com/vue-router/dist/vue-router.js" target="_blank" rel="noopener noreferrer">https://unpkg.com/vue-router/dist/vue-router.js<svg
		 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
		 class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a></p>
<p><a href="https://unpkg.com" target="_blank" rel="noopener noreferrer">Unpkg.com<svg xmlns="http://www.w3.org/2000/svg"
		 aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a> 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 <code>https://unpkg.com/vue-router@2.0.0/dist/vue-router.js</code>
	这样指定 版本号 或者 Tag。
</p>
<p>在 Vue 后面加载 <code>vue-router</code>，它会自动安装的：</p>
<div class="language-html extra-class">
	<pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/path/to/vue.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/path/to/vue-router.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</div>
<h3 id="npm"><a href="#npm" aria-hidden="true" class="header-anchor">#</a> NPM</h3>
<div class="language-bash extra-class">
	<pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> vue-router
</code></pre>
</div>
<p>如果在一个模块化工程中使用它，必须要通过 <code>Vue.use()</code> 明确地安装路由功能：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRouter<span class="token punctuation">)</span>
</code></pre>
</div>
<p>如果使用全局的 script 标签，则无须如此 (手动安装)。</p>
<h3 id="构建开发版"><a href="#构建开发版" aria-hidden="true" class="header-anchor">#</a> 构建开发版</h3>
<p>如果你想使用最新的开发版，就得从 GitHub 上直接 clone，然后自己 build 一个 <code>vue-router</code>。</p>
<div class="language-bash extra-class">
	<pre class="language-bash"><code><span class="token function">git</span> clone https://github.com/vuejs/vue-router.git node_modules/vue-router
<span class="token function">cd</span> node_modules/vue-router
<span class="token function">npm</span> <span class="token function">install</span>
<span class="token function">npm</span> run build
</code></pre>
</div>


<br><br>


<h2 id="introduce">
	<a href="#introduce" class="headerlink" title="introduce" data-scroll="">介绍</a>
</h2>	
<p class="bit-sponsor"><a href="https://www.bitsrc.io/?utm_source=vue&amp;utm_medium=vue&amp;utm_campaign=vue&amp;utm_term=vue&amp;utm_content=vue"
	 target="_blank"><span>This project is sponsored by</span> <img alt="bit" src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit-wide.png"></a></p>
<div class="tip custom-block">
	<p class="custom-block-title">版本说明</p>
	<p>对于 TypeScript 用户来说，<code>vue-router@3.0+</code> 依赖 <code>vue@2.5+</code>，反之亦然。</p>
</div>
<p>Vue Router 是 <a href="http://cn.vuejs.org" target="_blank" rel="noopener noreferrer">Vue.js<svg xmlns="http://www.w3.org/2000/svg"
		 aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a> 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>
<ul>
	<li>嵌套的路由/视图表</li>
	<li>模块化的、基于组件的路由配置</li>
	<li>路由参数、查询、通配符</li>
	<li>基于 Vue.js 过渡系统的视图过渡效果</li>
	<li>细粒度的导航控制</li>
	<li>带有自动激活的 CSS class 的链接</li>
	<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>
	<li>自定义的滚动条行为</li>
</ul>
<p>现在开始<a href="/zh/guide/" class="">起步</a>或尝试一下我们的<a href="https://github.com/vuejs/vue-router/tree/dev/examples"
	 target="_blank" rel="noopener noreferrer">示例<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px"
		 viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a>吧 (查看仓库的 <a href="https://github.com/vuejs/vue-router/" target="_blank" rel="noopener noreferrer"><code>README.md</code><svg
		 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
		 class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a> 来运行它们)。</p>



<br><br>


	
</div>
<{/block}>
